<template>
  <view class="task-comment-input">
    <u-input
      v-model="inputValue"
      :type="'textarea'"
      :maxlength="maxlength"
      :border="border"
      :height="inpitHeight"
      :auto-height="autoHeight"
      :custom-style="customStyle"
      :clearable="clearable"
      focus
      trim
      :placeholder="placeholder"
    />
    <view class="task-comment-img-view">
      <view
        v-for="(img, i) in fileList"
        :key="i"
        class="task-comment-img-content"
      >
        <u-icon class="task-comment-img-close" color="#fff" name="close-circle" size="28" @click="removeTackedPhoto(img, i)" />
        <u-image
          width="100%"
          height="100%"
          :src="img.b64"
          border-radiu="6"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Comment',
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    customStyle: {
      type: Object,
      default: () => {}
    },
    maxlength: {
      type: Number,
      default: 9999
    },
    border: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    inpitHeight: {
      type: String,
      default: '100px'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    autoHeight: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      inputValue: '',
      fileList: []
    };
  },
  watch: {
    inputValue(value) {
      this.$set(this.value, 'inputValue', value);
    }
  },
  created() {
    this.inputValue = this.value.inputValue;
  },
  methods: {
    removeTackedPhoto(img, i) {
      // this.getUpload().remove(i);
      this.fileList.splice(i, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.task-comment-input {
  margin: 12px 8px;
  background-color: #EAECF0;
  border-radius: 14px;
  .task-comment-img-view {
    padding: 12px 8px;;
    min-height: 30px;
    display: grid;
    gap: 10px 13px;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    > view {
      height: 44px;
    }

    .task-comment-img-content {
      position: relative;
      .task-comment-img-close {
        position: absolute;
        right: -5px;
        top: -5px;
        z-index: 12;
        background-color: red;
        border-radius: 60px;
      }
    }
  }
}

.task-comment-footer {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    .task-comment-footer-camera {
      margin-right: 24px;
    }

    .task-submitComment {
      color: #2979FF;
      font-weight: 600;
    }
  }
</style>
